<template>
  <div class="SystemLocalConfiguration">
    <!-- 头部文字描述开始 -->
    <div class="title_text"></div>
    <!-- 头部文字描述结束 -->
    <div class="box-top">
      <!-- <span class="top-text">操作机构：</span> -->
      <!-- 迷糊搜索开始 -->
      <el-input
        size="small"
        style="width:15%;margin-left:20px"
        v-model="value_a"
      ></el-input>
      <el-button
        size="small"
        style="margin-left:5px"
        @click="search_table_a"
        icon="el-icon-search"
      ></el-button>
      <!-- 迷糊搜索结束 -->
      <el-button
        class="top-button"
        style="margin-left:10px"
        icon="el-icon-plus"
        size="small"
        @click="add"
      ></el-button>
    </div>
    <div class="dDownMain">
      <div
        class="twoBox"
        :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 140px'"
      >
        <template>
          <el-table
            v-loading="isLoading"
            element-loading-text="数据加载中~请稍后..."
            :data="tableData"
            style="width: 100%"
            class="bom-table"
            height="600"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column prop="Code" label="系统编码" width="180">
            </el-table-column>
            <el-table-column prop="Name" label="系统名称" width="210">
            </el-table-column>
            <el-table-column
              prop="Path"
              label="系统跳转路径"
              width="120"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <template
                  style="text-decoration:underline;cursor:pointer;text-decoration:none"
                >
                  {{ scope.row.Path }}
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="ThirdParams" label="跳转参数" width="100">
            </el-table-column>
            <el-table-column prop="Icon" label="系统图标" width="100">
            </el-table-column>
            <el-table-column prop="Vendor" label="厂商" width="100">
            </el-table-column>
            <el-table-column prop="Version" label="系统版本号" width="100">
            </el-table-column>
            <el-table-column label="系统类型" width="100">
              <template slot-scope="scope">
                <span>{{
                  scope.row.SystemType == 1 ? "网页端" : "客户端"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="PackageUrl"
              label="系统安装包（针对cs程序）"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="Remark"
              label="备注"
              width="180"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <template
                  style="text-decoration:underline;cursor:pointer;text-decoration:none"
                >
                  {{ scope.row.Remark }}
                </template>
              </template>
            </el-table-column>

            <!-- <el-table-column
            prop="API"
            label="接口地址"
            width="100"
            show-overflow-tooltip
          >
            <template scope="scope">
              <template
                style="text-decoration:underline;cursor:pointer;text-decoration:none"
              >
                {{ scope.row.API}}
              </template>
            </template>
          </el-table-column> -->
            <!-- <el-table-column
            prop="ExtendParam"
            label="请求参数"
            width="100"
          >
          </el-table-column> -->
            <!-- <el-table-column
            prop="APIDoc"
            label="接口参数说明文档"
            width="140"
          >
          </el-table-column> -->
            <!-- <el-table-column
            prop="DbType"
            label="数据库类型"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="DbIP"
            label="数据库地址"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="DbBase"
            label="数据库名称"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="DbUser"
            label="数据库连接用户"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="DbPwd"
            label="数据库连接密码"
            width="140"
          >
          </el-table-column> -->
            <!-- <el-table-column
            prop="DbView"
            label="视图名称"
            width="100"
          >
          </el-table-column> -->
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  icon="el-icon-edit"
                  @click="listEdit(scope.row)"
                ></el-button>
                <el-button
                  size="small"
                  icon="el-icon-delete"
                  @click="listDel(scope.row.Id)"
                ></el-button>
                <el-button v-if="false" size="small" @click="details(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页开始 -->
        <el-pagination
          :page-size="this.limit"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="pagination"
          class="pagination"
        >
        </el-pagination>
        <!-- 分页结束 -->
      </div>
    </div>
    <!-- 弹层开始 -->
    <el-dialog
      :title="tip"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="close"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="add-form">
        <el-form
          label-position="left"
          label-width="80px"
          :model="formLabelAlign"
          :label-position="right"
        >
          <el-form-item
            style="display:inline-block;width:50%;"
            v-if="this.flag == 1"
            label="编码"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.Code"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            style="display:inline-block;width:50%;"
            v-if="this.flag == 1"
            label="名称"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.Name"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 1"
            label="跳转路径"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.Path"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 1"
            label="跳转参数"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.ThirdParams"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 1"
            label="图标"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.Icon"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 1"
            label="厂商"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.Vendor"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 1"
            label="版本号"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.Version"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 1"
            label="系统类型"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-select
              filterable
              v-model="formLabelAlign.SystemType"
              placeholder="请选择系统类型"
              class="add-form-input"
              style="width:100%;"
            >
              <el-option label="网页端" :value="1"></el-option>
              <el-option label="客户端" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 1"
            label="系统安装包"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.PackageUrl"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            style="display:inline-block;width:100%;"
            v-if="this.flag == 1"
            label="备注"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign.Remark"
              class="add-form-input"
              style="width:80%"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item
            style="display:inline-block;width:50%;"
            v-if="this.flag == 2"
            label="名称"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign_2.Name"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 2"
            label="厂商"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign_2.Vendor"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 2"
            label="版本号"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign_2.Version"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.flag == 2"
            label="数据类型"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-select
              filterable
              v-model="formLabelAlign_2.DType"
              placeholder="请选择数据类型"
              style="display:inline-block;width:50%;"
            >
              <el-option label="用户" :value="1"></el-option>
              <el-option label="值域" :value="2"></el-option>
              <el-option label="数据集映射" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="this.flag == 2"
            label="数据提供方式"
            style="display:inline-block;width:50%;"
            label-width="130px"
          >
            <el-select
              v-model="formLabelAlign_2.ParamType"
              placeholder="请选择数据提供方式"
              class="add-form-input"
              style="display:inline-block;width:50%;"
            >
              <el-option label="接口" :value="1"></el-option>
              <el-option label="数据表" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="接口地址"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 1"
          >
            <el-input
              v-model="formLabelAlign_2.API"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="请求参数"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 1"
          >
            <el-input
              v-model="formLabelAlign_2.ExtendParam"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <!-- /********************* */ -->

          <el-form-item
            label="接口参数说明文档"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 1"
          >
            <el-input
              v-model="formLabelAlign_2.APIDoc"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <!-- /******************************* */ -->
          <el-form-item
            label="数据库类型"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 2"
          >
            <el-select
              filterable
              v-model="formLabelAlign_2.DbType"
              placeholder="请选择数据库类型"
              class="add-form-input"
              style="width:100%"
              @change="DbType_change"
            >
              <el-option label="SqlServer" value="SqlServer"></el-option>
              <el-option label="MySQL" value="MySQL"></el-option>
              <el-option label="Oracle" value="Oracle"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="端口号"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 2"
          >
            <el-input v-model="formLabelAlign_2.DbPort" class="add-form-input">
            </el-input>
          </el-form-item>
          <el-form-item
            label="数据库地址"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 2"
          >
            <el-input
              v-model="formLabelAlign_2.DbIP"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库名称"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 2"
          >
            <el-input
              v-model="formLabelAlign_2.DbBase"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="视图名称"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 2"
          >
            <el-input
              v-model="formLabelAlign_2.DbView"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 2"
          >
            <el-input
              v-model="formLabelAlign_2.DbUser"
              class="add-form-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            style="display:inline-block;width:50%;"
            label-width="130px"
            v-if="this.flag == 2 && this.formLabelAlign_2.ParamType == 2"
          >
            <el-input
              v-model="formLabelAlign_2.DbPwd"
              class="add-form-input"
            ></el-input>
          </el-form-item>

          <el-form-item
            v-if="this.flag == 2"
            label="备注"
            style="display:inline-block;width:100%;"
            label-width="130px"
          >
            <el-input
              v-model="formLabelAlign_2.Remark"
              class="add-form-input"
              style="width:80%"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align:right">
        <el-button @click="close">关闭</el-button>
        <el-button @click="addUserList(ruleForm)" type="primary"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 弹层结束 -->
    <!-- 详情弹层开始 -->
    <el-dialog
      title="详情"
      width="60%"
      :visible.sync="dialogTableVisible"
      :before-close="close_2"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>
        <el-input
          size="mini"
          style="width:30%"
          placeholder="请输入内容"
          v-model="input_load_2"
        ></el-input>
        <el-button
          icon="el-icon-search"
          size="small"
          @click="search_2"
          style="margin-left:10px"
        ></el-button>
        <el-button icon="el-icon-plus" size="small" @click="add2"></el-button>
      </div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        style="margin-top:10px"
      >
        <el-tab-pane label="用户" name="first">
          <el-table
            v-loading="isLoading"
            element-loading-text="数据加载中~请稍后..."
            :data="gridData"
            style="width: 100%;margin-top:10px"
            class="bom-table"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="
                (index) => {
                  return limit * (page - 1) + index + 1;
                }
              "
              width="100"
            >
            </el-table-column>
            <el-table-column prop="Name" label="名称" width="140">
            </el-table-column>
            <el-table-column prop="Vendor" label="厂商" width="100">
            </el-table-column>
            <el-table-column prop="Version" label="版本号" width="100">
            </el-table-column>
            <el-table-column prop="DType" label="数据类型" width="100">
              <template slot-scope="scope">
                {{
                  scope.row.DType == 1
                    ? "用户"
                    : scope.row.DType == 2
                    ? "值域"
                    : "数据集映射"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="ParamType" label="数据提供方式" width="140">
              <template slot-scope="scope">
                {{
                  scope.row.ParamType == 1
                    ? "接口"
                    : scope.row.ParamType == 2
                    ? "数据表"
                    : "未选择"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="API" label="接口地址" width="140">
            </el-table-column>
            <el-table-column prop="ExtendParam" label="请求参数" width="100">
            </el-table-column>
            <el-table-column prop="APIDoc" label="接口参数说明文档" width="100">
            </el-table-column>
            <el-table-column prop="DbType" label="数据库类型" width="100">
            </el-table-column>
            <el-table-column prop="DbIP" label="数据库地址" width="100">
            </el-table-column>
            <el-table-column prop="DbBase" label="数据库名称" width="100">
            </el-table-column>
            <el-table-column prop="DbUser" label="数据库连接用户" width="100">
            </el-table-column>
            <el-table-column prop="DbPwd" label="数据库连接密码" width="100">
            </el-table-column>
            <el-table-column prop="DbView" label="视图名称" width="100">
            </el-table-column>
            <el-table-column prop="Remark" label="备注" width="100">
            </el-table-column>
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  icon="el-icon-edit"
                  @click="listEdit_2(scope.row)"
                ></el-button>
                <el-button
                  size="small"
                  icon="el-icon-delete"
                  @click="listDel_2(scope.row.Id)"
                  append-to-body
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="值域" name="second">
          <el-table
            v-loading="isLoading"
            element-loading-text="数据加载中~请稍后..."
            :data="gridData"
            style="width: 100%;margin-top:10px"
            class="bom-table"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="
                (index) => {
                  return limit * (page - 1) + index + 1;
                }
              "
              width="100"
            >
            </el-table-column>
            <el-table-column prop="Name" label="名称" width="140">
            </el-table-column>
            <el-table-column prop="Vendor" label="厂商" width="100">
            </el-table-column>
            <el-table-column prop="Version" label="版本号" width="100">
            </el-table-column>
            <el-table-column prop="DType" label="数据类型" width="100">
              <template slot-scope="scope">
                {{
                  scope.row.DType == 1
                    ? "用户"
                    : scope.row.DType == 2
                    ? "值域"
                    : "数据集映射"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="ParamType" label="数据提供方式" width="140">
              <template slot-scope="scope">
                {{
                  scope.row.ParamType == 1
                    ? "接口"
                    : scope.row.ParamType == 2
                    ? "数据表"
                    : "未选择"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="API" label="接口地址" width="140">
            </el-table-column>
            <el-table-column prop="ExtendParam" label="请求参数" width="100">
            </el-table-column>
            <el-table-column prop="APIDoc" label="接口参数说明文档" width="100">
            </el-table-column>
            <el-table-column prop="DbType" label="数据库类型" width="100">
            </el-table-column>
            <el-table-column prop="DbIP" label="数据库地址" width="100">
            </el-table-column>
            <el-table-column prop="DbBase" label="数据库名称" width="100">
            </el-table-column>
            <el-table-column prop="DbUser" label="数据库连接用户" width="100">
            </el-table-column>
            <el-table-column prop="DbPwd" label="数据库连接密码" width="100">
            </el-table-column>
            <el-table-column prop="DbView" label="视图名称" width="100">
            </el-table-column>
            <el-table-column prop="Remark" label="备注" width="100">
            </el-table-column>
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  icon="el-icon-edit"
                  @click="listEdit_2(scope.row)"
                ></el-button>
                <el-button
                  size="small"
                  icon="el-icon-delete"
                  @click="listDel_2(scope.row.Id)"
                  append-to-body
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="数据集映射" name="third">
          <el-table
            v-loading="isLoading"
            element-loading-text="数据加载中~请稍后..."
            :data="gridData"
            style="width: 100%;margin-top:10px"
            class="bom-table"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="
                (index) => {
                  return limit * (page - 1) + index + 1;
                }
              "
              width="100"
            >
            </el-table-column>
            <el-table-column prop="SyncStatus" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.SyncStatus == 0
                    ? "待处理"
                    : scope.row.SyncStatus == 1
                    ? "通过"
                    : scope.row.SyncStatus == 2
                    ? "失败"
                    : "未知状态"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="Name" label="名称" width="140">
            </el-table-column>
            <el-table-column prop="Vendor" label="厂商" width="100">
            </el-table-column>
            <el-table-column prop="Version" label="版本号" width="100">
            </el-table-column>
            <el-table-column prop="DType" label="数据类型" width="100">
              <template slot-scope="scope">
                {{
                  scope.row.DType == 1
                    ? "用户"
                    : scope.row.DType == 2
                    ? "值域"
                    : "数据集映射"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="ParamType" label="数据提供方式" width="140">
              <template slot-scope="scope">
                {{
                  scope.row.ParamType == 1
                    ? "接口"
                    : scope.row.ParamType == 2
                    ? "数据表"
                    : "未选择"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="API" label="接口地址" width="140">
            </el-table-column>
            <el-table-column prop="ExtendParam" label="请求参数" width="100">
            </el-table-column>
            <el-table-column prop="APIDoc" label="接口参数说明文档" width="100">
            </el-table-column>
            <el-table-column prop="DbType" label="数据库类型" width="100">
            </el-table-column>
            <el-table-column prop="DbIP" label="数据库地址" width="100">
            </el-table-column>
            <el-table-column prop="DbBase" label="数据库名称" width="100">
            </el-table-column>
            <el-table-column prop="DbUser" label="数据库连接用户" width="100">
            </el-table-column>
            <el-table-column prop="DbPwd" label="数据库连接密码" width="100">
            </el-table-column>
            <el-table-column prop="DbView" label="视图名称" width="100">
            </el-table-column>
            <el-table-column prop="Remark" label="备注" width="100">
            </el-table-column>
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  icon="el-icon-edit"
                  @click="listEdit_2(scope.row)"
                ></el-button>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="数据集同步校验"
                  placement="top"
                >
                  <el-button
                    size="small"
                    icon="el-icon-coin"
                    @click="listEdit_3(scope.row)"
                  ></el-button>
                </el-tooltip>

                <el-button
                  size="small"
                  icon="el-icon-delete"
                  @click="listDel_2(scope.row.Id)"
                  append-to-body
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange"
      >
      </el-pagination>
    </el-dialog>
    <!-- 详情弹层结束 -->
  </div>
  <!-- ************************* -->
</template>

<script>
export default {
  // 组件名称
  name: "SystemLocalConfiguration",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      right: "right",
      // 操作机构选项
      options_a: [
        {
          value: "选项1",
          label: "选项1",
        },
        {
          value: "选项2",
          label: "选项2",
        },
      ],
      page: 1,
      limit: 15,
      total: 1,
      tcode_1: "",
      //   模糊搜索值
      value_a: "",
      //   用户信息维护表格
      tableData: [],
      dialogVisible: false, // 控制弹层显示
      formLabelAlign: {
        Id: "", //主键id
        Code: "", //系统编码
        Name: "", //系统名称
        Path: "", //系统跳转路径
        ThirdParams: "", //跳转参数
        Icon: "", //系统图标
        Vendor: "", //厂商
        Version: "", //系统版本号
        SystemType: "", //系统类型.1 网页端；2 客户端
        PackageUrl: "", //系统安装包（针对cs程序）
        Remark: "", //备注
        ParamType: "", //数据提供方式.1 接口；2 数据表
        API: "", //接口地址
        ExtendParam: "", //请求参数
        APIDoc: "", //接口参数说明文档
        DbType: "", //数据库类型.SqlServer；MySQL；Oracle；
        DbIP: "", //数据库地址
        DbUser: "", //数据库连接用户
        DbPwd: "", //数据库连接密码
        DbView: "", //视图名称
      },
      ruleForm: {
        Code: "",
        Name: "",
        Version: "",
        SystemType: "",
        ParamType: "",
        API: "",
        DbType: "",
        DbIP: "",
        DbBase: "",
        DbUser: "",
        DbView: "",
      },
      isLoading: false,
      dialogTableVisible: false,
      tip: "添加",
      gridData: [],
      flag: 1,
      input_load_2: "",
      tcode: "",
      formLabelAlign_2: {
        Id: 0, // 主键id ,
        TCode: "", // 系统编码 ,
        Name: "", // 名称 ,
        Vendor: "", // 厂商 ,
        Version: "", // 版本号 ,
        DType: "", // 数据类型.1 用户；2 值域 ,
        ParamType: "", // 数据提供方式.1 接口；2 数据表； ,
        API: "", // 接口地址 ,
        ExtendParam: "", // 请求参数 ,
        APIDoc: "", // 接口参数说明文档 ,
        DbType: "", // 数据库类型 ,
        DbIP: "", // 数据库地址 ,
        DbBase: "", // 数据库名称 ,
        DbUser: "", // 数据库连接用户 ,
        DbPwd: "", // 数据库连接密码 ,
        DbView: "", // 视图名称 ,
        Remark: "", // 备注 ,
        Status: "", // 状态 ,
        CreateTime: "", // 创建时间 ,
        CreateUser: "", // 创建人 ,
        UpdateTime: "", // 修改时间 ,
        UpdateUser: "", // 修改人
        DbPort: "",
      },
      formLabelAlign_2_tcode: "",
      activeName: "first",
      dType: 1,
      total: null,
      limit: 6,
      page: 1,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTableData();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    //   添加用户列表按钮
    addUserList() {
      if (this.flag == 1) {
        let url =
          this.formLabelAlign.Id == 0
            ? "ThirdMange/Create/927"
            : "ThirdMange/Update/927";
        let param = this.formLabelAlign;
        this.$post(url, param)
          .then((res) => {
            if (res.code === 0) {
              this.formLabelAlign = {
                Id: 0, //主键id
                Code: "", //系统编码
                Name: "", //系统名称
                Path: "", //系统跳转路径
                ThirdParams: "", //跳转参数
                Icon: "", //系统图标
                Vendor: "", //厂商
                Version: "", //系统版本号
                SystemType: "", //系统类型.1 网页端；2 客户端
                PackageUrl: "", //系统安装包（针对cs程序）
                Remark: "", //备注
                ParamType: "", //数据提供方式.1 接口；2 数据表
                API: "", //接口地址
                ExtendParam: "", //请求参数
                APIDoc: "", //接口参数说明文档
                DbType: "", //数据库类型.SqlServer；MySQL；Oracle；
                DbIP: "", //数据库地址
                DbUser: "", //数据库连接用户
                DbPwd: "", //数据库连接密码
                DbView: "", //视图名称
              };
              this.getTableData();
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.close();
            } else if (res.code == -1) {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.flag == 2) {
        this.formLabelAlign_2.TCode = this.formLabelAlign_2_tcode;
        let param = this.formLabelAlign_2;
        console.log("传递参数");
        console.log(param);
        let url =
          param.Id == 0 ? "ThirdMange/ExtendCreate" : "ThirdMange/ExtendUpdate";
        this.$post(url, param)
          .then((res) => {
            if (res.code == 0) {
              this.formLabelAlign_2 = {
                Id: 0, // 主键id ,
                TCode: "", // 系统编码 ,
                Name: "", // 名称 ,
                Vendor: "", // 厂商 ,
                Version: "", // 版本号 ,
                DType: "", // 数据类型.1 用户；2 值域 ,
                ParamType: "", // 数据提供方式.1 接口；2 数据表； ,
                API: "", // 接口地址 ,
                ExtendParam: "", // 请求参数 ,
                APIDoc: "", // 接口参数说明文档 ,
                DbType: "", // 数据库类型 ,
                DbIP: "", // 数据库地址 ,
                DbBase: "", // 数据库名称 ,
                DbUser: "", // 数据库连接用户 ,
                DbPwd: "", // 数据库连接密码 ,
                DbView: "", // 视图名称 ,
                Remark: "", // 备注 ,
                Status: "", // 状态 ,
                CreateTime: "", // 创建时间 ,
                CreateUser: "", // 创建人 ,
                UpdateTime: "", // 修改时间 ,
                UpdateUser: "", // 修改人
                DbPort: "",
              };
              this.details(this.tcode);
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.close();
            } else if (res.code == -1) {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
        this.search_2();
      }
    },
    // 获取用户列表数据
    getTableData() {
      let param = {
        page: this.page,
        limit: this.limit,
      };
      this.isLoading = true;
      this.$post(
        "ThirdMange/PageList/927?page=" + param.page + "&limit=" + param.limit,
        param
      )
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.TotalCount;
          this.isLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.isLoading = false;
        });
    },
    search_table_a() {
      let param = {
        page: this.page,
        limit: this.limit,
        keyword: this.value_a,
      };
      this.isLoading = true;
      this.$post(
        "ThirdMange/PageList/927?keyword=" +
          param.keyword +
          "&page=" +
          param.page +
          "&limit=" +
          param.limit,
        param
      )
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.TotalCount;
          this.isLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.isLoading = false;
        });
    },
    close() {
      this.dialogVisible = false;
      this.formLabelAlign = {
        Id: "", //主键id
        Code: "", //系统编码
        Name: "", //系统名称
        Path: "", //系统跳转路径
        ThirdParams: "", //跳转参数
        Icon: "", //系统图标
        Vendor: "", //厂商
        Version: "", //系统版本号
        SystemType: "", //系统类型.1 网页端；2 客户端
        PackageUrl: "", //系统安装包（针对cs程序）
        Remark: "", //备注
        ParamType: "", //数据提供方式.1 接口；2 数据表
        API: "", //接口地址
        ExtendParam: "", //请求参数
        APIDoc: "", //接口参数说明文档
        DbType: "", //数据库类型.SqlServer；MySQL；Oracle；
        DbIP: "", //数据库地址
        DbUser: "", //数据库连接用户
        DbPwd: "", //数据库连接密码
        DbView: "", //视图名称
      };
      this.formLabelAlign_2 = {
        Id: 0, // 主键id ,
        TCode: "", // 系统编码 ,
        Name: "", // 名称 ,
        Vendor: "", // 厂商 ,
        Version: "", // 版本号 ,
        DType: "", // 数据类型.1 用户；2 值域 ,
        ParamType: "", // 数据提供方式.1 接口；2 数据表； ,
        API: "", // 接口地址 ,
        ExtendParam: "", // 请求参数 ,
        APIDoc: "", // 接口参数说明文档 ,
        DbType: "", // 数据库类型 ,
        DbIP: "", // 数据库地址 ,
        DbBase: "", // 数据库名称 ,
        DbUser: "", // 数据库连接用户 ,
        DbPwd: "", // 数据库连接密码 ,
        DbView: "", // 视图名称 ,
        Remark: "", // 备注 ,
        Status: "", // 状态 ,
        CreateTime: "", // 创建时间 ,
        CreateUser: "", // 创建人 ,
        UpdateTime: "", // 修改时间 ,
        UpdateUser: "", // 修改人,
        DbPort: "",
      };
      this.input_load_2 = "";
      if (this.flag == 2) {
        // this.search_2()
      }

      // this.$refs[formName].resetFields()
    },
    close_2() {
      this.dialogTableVisible = false;
      this.input_load_2 = "";
      this.flag = 1;
      this.formLabelAlign_2 = {
        Id: 0, // 主键id ,
        TCode: "", // 系统编码 ,
        Name: "", // 名称 ,
        Vendor: "", // 厂商 ,
        Version: "", // 版本号 ,
        DType: "", // 数据类型.1 用户；2 值域 ,
        ParamType: "", // 数据提供方式.1 接口；2 数据表； ,
        API: "", // 接口地址 ,
        ExtendParam: "", // 请求参数 ,
        APIDoc: "", // 接口参数说明文档 ,
        DbType: "", // 数据库类型 ,
        DbIP: "", // 数据库地址 ,
        DbBase: "", // 数据库名称 ,
        DbUser: "", // 数据库连接用户 ,
        DbPwd: "", // 数据库连接密码 ,
        DbView: "", // 视图名称 ,
        Remark: "", // 备注 ,
        Status: "", // 状态 ,
        CreateTime: "", // 创建时间 ,
        CreateUser: "", // 创建人 ,
        UpdateTime: "", // 修改时间 ,
        UpdateUser: "", // 修改人
        DbPort: "",
      };
    },
    open() {
      this.dialogVisible = true;
    },
    // 列表删除按钮
    listDel(id) {
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("ThirdMange/Delete/927/" + id)
            .then((res) => {
              if (res.code == 0) {
                this.getTableData();
                this.$message({
                  message: res.msg,
                  type: "success",
                });
              } else if (res.code == -1) {
                this.$message({
                  message: res.msg,
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((_) => {
          return false;
        });
    },
    listDel_2(id) {
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("ThirdMange/ExtendDelete/" + id)
            .then((res) => {
              if (res.code == 0) {
                this.search_2();
                this.$message({
                  message: res.msg,
                  type: "success",
                });
              } else if (res.code == -1) {
                this.$message({
                  message: res.msg,
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((_) => {});
    },
    // 列表修改按钮
    listEdit(row) {
      this.formLabelAlign = row;
      this.dialogVisible = true;
      this.tip = "修改";
    },
    listEdit_2(row) {
      this.flag = 2;
      // this.gridData = row
      this.formLabelAlign_2 = row;
      this.dialogVisible = true;
      this.tip = "详情修改";
    },
    listEdit_3(row) {
      console.log(row);
      let id = row.Id;
      this.$post("/ThirdMange/ExtendCheck/" + id).then((res) => {
        if (res.code == 0) {
          this.search_2();
          this.$message({
            message: res.msg,
            type: "success",
          });
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      });
    },
    details(row) {
      this.formLabelAlign_2 = {
        Id: 0, // 主键id ,
        TCode: row.Code, // 系统编码 ,
        Name: "", // 名称 ,
        Vendor: "", // 厂商 ,
        Version: "", // 版本号 ,
        DType: row.DType, // 数据类型.1 用户；2 值域 ,
        ParamType: row.ParamType, // 数据提供方式.1 接口；2 数据表； ,
        API: row.API, // 接口地址 ,
        ExtendParam: row.ExtendParam, // 请求参数 ,
        APIDoc: row.APIDoc, // 接口参数说明文档 ,
        DbType: "", // 数据库类型 ,
        DbIP: row.DbIP, // 数据库地址 ,
        DbBase: row.DbBase, // 数据库名称 ,
        DbUser: row.DbUser, // 数据库连接用户 ,
        DbPwd: row.DbPwd, // 数据库连接密码 ,
        DbView: row.DbView, // 视图名称 ,
        Remark: "", // 备注 ,
        Status: row.Status, // 状态 ,
        CreateTime: row.CreateTime, // 创建时间 ,
        CreateUser: row.CreateUser, // 创建人 ,
        UpdateTime: row.UpdateTime, // 修改时间 ,
        UpdateUser: row.UpdateUser, // 修改人
        DType: "",
        ExtendParam: "",
        DbPort: "",
      };
      console.log(this.formLabelAlign_2);
      this.formLabelAlign_2_tcode = row.Code;
      this.tcode = row;
      this.dialogTableVisible = true;
      this.$post(
        "ThirdMange/ExtendPageList?tcode=" +
          this.tcode.Code +
          "&keyword=" +
          this.input_load_2 +
          "&page=" +
          this.page +
          "&limit=" +
          this.limit +
          "&dType=" +
          this.dType
      ).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.total = res.data.TotalCount;
          this.gridData = res.data.list;
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    add() {
      this.flag = 1;
      this.dialogVisible = true;
      this.tip = "新增";
    },
    add2() {
      this.flag = 2;
      this.dialogVisible = true;
      this.tip = "详情新增";
    },
    search_2() {
      this.$post(
        "ThirdMange/ExtendPageList?tcode=" +
          this.tcode.Code +
          "&keyword=" +
          this.input_load_2 +
          "&page=" +
          1 +
          "&limit=" +
          15 +
          "&dType=" +
          this.dType
      ).then((res) => {
        if (res.code == 0) {
          this.page = res.data.TotalPage;
          this.total = res.data.TotalCount;
          this.gridData = res.data.list;
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    pagination(val) {
      this.page = val;
      this.getTableData();
    },
    DbType_change(val) {
      if (val == "SqlServer") {
        this.formLabelAlign_2.DbPort = "1433";
      } else if (val == "MySQL") {
        this.formLabelAlign_2.DbPort = "3306";
      } else if (val == "Oracle") {
        this.formLabelAlign_2.DbPort = "1521";
      }
    },
    handleClick(tab, event) {
      this.page = 1;
      console.log(tab);
      if (tab.label == "用户") {
        this.dType = 1;
      } else if (tab.label == "值域") {
        this.dType = 2;
      } else if (tab.label == "数据集映射") {
        this.dType = 3;
      }
      this.$post(
        "ThirdMange/ExtendPageList?tcode=" +
          this.tcode.Code +
          "&keyword=" +
          this.input_load_2 +
          "&page=" +
          1 +
          "&limit=" +
          15 +
          "&dType=" +
          this.dType
      ).then((res) => {
        if (res.code == 0) {
          this.page = 1;
          this.total = res.data.TotalCount;
          this.gridData = res.data.list;
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    pageChange(val) {
      this.page = val;
      this.search_2();
    },
  },
};
</script>

<style scoped lang="scss">
.SystemLocalConfiguration {
  .title_text {
    margin: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #6bb1ec;
  }
  .top-text {
    display: inline-block;
    padding: 5px;
    padding-left: 10px;
    margin-left: 10px;
    margin-right: 30px;
    text-align: center;
    background-color: #d5e6f7;
    color: #24669a;
    font-weight: 700;
  }
  .top-button {
    margin-left: 30px;
  }
  .box-card {
    position: absolute;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    z-index: 999;
    width: 80%;
    overflow: scroll;
  }
  .add-form {
    .form-item {
      display: inline-block;
    }
    .add-form-input {
      width: 200px;
      margin-right: 50px;
    }
  }
  .pagination {
    width: 100%;
    text-align: center;
  }
  .box-bom {
    margin-top: 10px;
    height: 600px;
    // .el-table {
    //   height: 750px;
    // }
    // bom-table {
    //   height: 100%;
    // }
  }
  .caozuo {
    float: right;
    margin-top: -20px;
  }
  .el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
    overflow: scroll !important;
  }
}
</style>
